<template>
  <div class="acccheck-container">
    <div class="position">
      <span>当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>审核审批</el-breadcrumb-item>
        <el-breadcrumb-item>教师注册审批</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <el-input
        placeholder="请输入教师姓名"
        v-model="input"
        clearable
      ></el-input>
      <el-button type="primary" @click="searchbyname">查询</el-button>
    </div>
    <div class="acc-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="215"></el-table-column>
        <el-table-column prop="name" label="姓名" width="215"></el-table-column>
        <el-table-column
          prop="account"
          label="账号"
          width="215"
        ></el-table-column>
        <el-table-column
          prop="time"
          label="申请日期"
          width="215"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >同意</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        ref="pagination"
        :pagesize="pagesize"
        :total="total"
        v-if="total"
        @changepage="changetable"
      ></pagination>
    </div>
  </div>
</template>

<script>
import http from "@/api/adminapi";
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      input: "",
    };
  },
  methods: {
    async handleEdit(index, row) {
      let result = await http.accept({ name: row.name, account: row.account });
      if (result.status == 200) {
        this.$Toast({
          content: result.data.msg,
          type: result.data.type,
        });
        //删除元素后更新vuex仓库
        this.$store.dispatch("deleteaccount", index);
        this.$refs.pagination.changecurrentpage(this.currentpage);
      }
    },
    async handleDelete(index, row) {
      let result = await http.reject({ name: row.name, account: row.account });
      if (result.status == 200) {
        this.$Toast({
          content: result.data.msg,
          type: result.data.type,
        });
        //删除元素后更新vuex仓库
        this.$store.dispatch("deleteaccount", index);
        this.$refs.pagination.changecurrentpage(this.currentpage);
      }
    },
    //改变当前页
    changetable(page) {
      this.$store.dispatch("changeaccountpage", page);
    },
    searchbyname(){
      if(this.input){
        this.$store.dispatch('gettchbyname',this.input);
      }
      else{
        this.$store.dispatch('getaccount');
      }

    }
  },
  mounted() {
    this.$store.dispatch("getaccount");
  },
  computed: {
    ...mapState({
      tableData: (state) => {
        if (Array.isArray(state.admin.getaccountdata.tabledata)) {
          if (
            state.admin.getaccountdata.pagesize &&
            state.admin.getaccountdata.currentpage
          ) {
            let currentpage = state.admin.getaccountdata.currentpage;
            let pagesize=state.admin.getaccountdata.pagesize;
            let tableData = state.admin.getaccountdata.tabledata.slice(
              //实现分页
              (currentpage - 1) * pagesize,
              currentpage * pagesize
            );
            return tableData;
          } else {
            return state.admin.getaccountdata.tabledata;
          }
        }
      },
      pagesize: (state) => {
        if (state.admin.getaccountdata.pagesize) {
          return state.admin.getaccountdata.pagesize;
        } else {
          //若无教师审批，则每页显示条数为0
          return 0;
        }
      },
      total: (state) => {
        if (state.admin.getaccountdata.total) {
          return state.admin.getaccountdata.total;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
      currentpage: (state) => {
        if (state.admin.getaccountdata.currentpage) {
          return state.admin.getaccountdata.currentpage;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 50px;
  line-height: 50px;
  display: flex;
  margin-bottom: 10px;
  button {
    margin: 0 20px;
  }
}
.position {
  height: 30px;
  line-height: 30px;
  .el-breadcrumb {
    display: inline-block;
  }
  & > span {
    font-size: 16px;
  }
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
